$(function(){
    let $stairs = $(".stairs");
    let $ul_z = $(".ul-z");
    let $lis = $(".stairs .ul-z li");
    let topList = [];
    // 标记动画状态
    let animate = false;
    // 楼梯0713
    $.each($(".data"),function(index, ele){
        // console.log(index,ele);
        // 获取元素的高度放入到 top_list之中; 
        topList.push($(ele).offset().top);
    })
    // console.log(topList);
    $lis.click(function(){
        // 改变函数的this指向
        changeClass.call(this);
        // 获取下标
        var index = $(this).index();
        // console.log(index);
        animate = true;
        changeScrollTop(index);
    })
    function changeClass(){
        $(this).addClass("active").siblings().removeClass("active");
    }
    function changeScrollTop(index){
        if(index===4){
        $("html,body")
        .stop(true)
        .animate({
            scrollTop : 0, 
            function(){
                animate = false;
            }
        })
        }else{ $("html,body")
        .stop(true)
        .animate({
            scrollTop : topList[index],
            function(){
                animate = false;
            }
        })}
    }
    $(window).scroll(function(){
        if(!animate){
            var index = getIndex(); 
            changeLisClass(index);
        }
        var scrollTop = $("html,body").scrollTop();
        if(scrollTop < 600){
            $(".stairs").hide();
        }else{
            $(".stairs").show();
        }
    })
    function getIndex(){
        var scrollTop = $("html,body").scrollTop();
        // 获取下标
        if(scrollTop>=topList[topList.length-1]){
            return topList.length-1
        }
        for(let i=0;i<topList.length;i++){
            if(
                scrollTop >= topList[i]&&scrollTop < topList[i+1]
            ){
                return i
            }
        }
    }
    function changeLisClass(index){
        $lis.removeClass("active").eq(index).addClass("active");
    }
    // trigger() 方法触发被选元素的指定事件类型。
    // 规定被选元素要触发的事件。
    $(window).trigger("scroll")
})